<!-- 整点用能量报表 -->
<template>
  <div class="energyReport">
    <div class="operate card">
      <!-- <div >时间维度:</div> -->
      <div class="timedimension">
        <el-select style="width:70px" v-model="t_value" @change="t_change">
          <el-option v-for="item in options_t_type" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <!-- <div>时间区间:</div> -->
      <div class="picker">
        <el-date-picker style="width:180px" v-model="s_time" :editable="false" :clearable="false" :type="d_type" :format="v_type" :value-format="v_type" :picker-options="pickerOptions"></el-date-picker>
      </div>
      <div class="hidden-xs-only">
        <i class="el-icon-minus"></i>
      </div>
      <div class="picker">
        <el-tooltip :content="content" placement="top">
          <el-date-picker style="width:180px" v-model="e_time" :editable="false" :clearable="false" :type="d_type" :format="v_type" :value-format="v_type" :picker-options="pickerOptions"></el-date-picker>
        </el-tooltip>
      </div>
      <div v-if="t_value === 2">
        <el-time-select style="width:120px" v-model="value2" :picker-options="{
                        start: '00:00',
                        step: '01:00',
                        end: '23:00'
                    }" :editable="false" :clearable="false" placeholder="选择时间"></el-time-select>
      </div>
      <div>
        <el-select style="width:100px" v-model="workshop_value">
          <el-option v-for="item in workshop" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
      <div>
        <el-button type="primary" :disabled="!workshop_value" @click="t_button">查询</el-button>
      </div>
      <div class="export">
        <el-tooltip content="导出" placement="top">
          <el-button type :disabled="!workshop_value" @click="t_export">
            <i style="color:#0780EDfont-size:20px" class="iconfont icon-daochu"></i>
          </el-button>
        </el-tooltip>
      </div>
    </div>
    <el-row class="card" :gutter="0">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-loading="table_loading">
        <span style="position:absolute;left:50%;top:30px;z-index:90;margin-left:-60px">整点时间表数({{unit}})</span>
        <el-table :data="tableData" empty-text=" ">
          <el-table-column prop="unitName" label="计量表计" width="140" align="center" fixed="left"></el-table-column>

          <el-table-column label align="center" width>
            <el-table-column v-for="(item ,i) in timeData" :key="i" :label="item.slice(0,16)" :width="cenWidth" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.hourValue[i]==null?'':scope.row.hourValue[i]}}</span>
              </template>
            </el-table-column>
          </el-table-column>

          <el-table-column prop="cumulativeValue" :label="'累计值('+unit+')'" width="140" align="center" fixed="right"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import day from "@/utils/day.js"
// import Mtitle from '@/components/Mtitle'
// import tb from '@/components/table'
// import './index.scss'
export default {
  components: {
    // Mtitle,
    // tb
  },
  watch: {
  },
  data() {
    return {
      content: '查询时间跨度最大为24小时',
      value2: "",
      unit: 'kWh',
      cenWidth: '',
      timeData: '',
      page: {
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      workshop_value: '',
      workshop: [],
      tableData: [],
      // 初始开始时间
      s_time: "",
      // 初始结束时间
      e_time: "",
      // 初始日期格式
      v_type: "yyyy-MM-dd HH:mm",
      // 初始显示类型
      d_type: "datetime",
      // 日   月  年 
      t_value: 1,
      options_t_type: [
        {
          value: 1,
          label: "日"
        },
        {
          value: 2,
          label: "月"
        }
      ],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      // 获取年月日初始化时间对象
      table_loading: true,
      export_s_time: '',
      export_e_time: '',
      export_t_value: '',
      export_workshop_value: '',
      export_value2: '',
      // export_pageNum: '',
      // export_pageSize: ''
    }
  },
  computed: {
  },
  watch: {},
  mounted() {
  },
  created() {
    // 初始化默认时间
    this.s_e = day.init_value(this.d_type)
    // this.s_time = this.s_e.s
    // this.e_time = this.s_e.e
    // this.export_s_time = this.s_time
    // this.export_e_time = this.e_time
    // this.export_value = this.t_value
    //查询下拉框数据
    this.getSel()
    //查询日期 并在此方法中调用查询日期
    this.getCustData(1)
    //查询日期列表
    // this.getDataList()

  },
  methods: {
    //查询列表数据
    queryData(data) {
      this.$axios.post(this.Eelec + "/web/powerDataRecall/selectPowerDataRecall", {
        "custId": sessionStorage.getItem("custId"),
        "downsample": this.t_value === 1 ? 'day' : 'month',
        "endDate": this.e_time,
        "energyType": this.workshop_value === '' ? '01' : this.workshop_value,
        "hour": this.t_value === 1 ? '' : this.value2,
        "startDate": this.s_time
      })
        .then(res => {
          this.table_loading = false
          if (res.data.code == 200) {
            if (this.workshop_value === '01') {
              this.unit = "kWh"
            } else {
              this.unit = "t"
            }
            this.tableData = res.data.data
            if (this.tableData == null) {
              this.page.total = 0
            } else {
              this.page.total = this.tableData.length
            }
            //当请求为200 再赋值给时间并在此处做滚动判断 当请求为1002 则数据还是为上一次数据  
            this.timeData = data
            if (this.timeData.length > 3) {
              this.cenWidth = '200'
            } else {
              this.cenWidth = ''
            }
          } else if (res.data.code == 1002) {
            this.$message({
              message: res.data.error,
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //查询日期列表
    getDataList() {
      this.$axios.post(this.Eelec + "/web/powerDataRecall/dateList", {
        "custId": sessionStorage.getItem("custId"),
        "downsample": this.t_value === 1 ? 'day' : 'month',
        "endDate": this.e_time,
        "energyType": this.workshop_value === '' ? '01' : this.workshop_value,
        "hour": this.t_value === 1 ? '' : this.value2,
        "startDate": this.s_time
      })
        .then(res => {
          if (res.data.code == 200) {
            if (!res.data.data.length) {
              this.timeData = ' '
              this.table_loading = false
            } else {
              this.queryData(res.data.data)
            }
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //公司的核算时间
    getCustData(n) {
      this.$axios.post(this.Eelec + "/web/powerDataRecall/custDate", {
        "custId": sessionStorage.getItem("custId"),
        "downsample": this.t_value === 1 ? 'day' : 'month',
      })
        .then(res => {
          if (res.data.code === 200) {
            this.s_time = res.data.data.startDate
            this.e_time = res.data.data.endDate

            if (n === 1) {
              // 导出
              this.export_s_time = this.s_time
              this.export_e_time = this.e_time
              this.export_t_value = this.t_value
              this.export_workshop_value = this.export_workshop_value === '' ? '01' : this.workshop_value
              this.export_value2 = this.value2
              this.getDataList()
            }
          }
        })
    },
    //获取能源类型
    getSel() {
      this.$axios.post(this.Eelec + "/web/powerDataRecall/queryEnergyTypeByDict", {
        "custID": sessionStorage.getItem("custId"),
      })
        .then(res => {
          if (res.data.code == 200) {
            this.workshop = res.data.data
            this.workshop_value = res.data.data[0].value
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    t_export() {
      this.$axios.post(this.Eelec + "/web/powerDataRecall/getExcel", {
        "custId": sessionStorage.getItem("custId"),
        "downsample": this.export_t_value === 1 ? 'day' : 'month',
        "startDate": this.export_s_time,
        "endDate": this.export_e_time,
        "energyType": this.export_workshop_value,
        "hour": this.export_value2,
      })
        .then(res => {
          if (res.data.code === 200) {
            this.exShow = false
            if (res.data.data.path) {
              window.location.href = res.data.data.path
              this.$message({
                message: "导出成功",
                type: "success"
              })
            }
          }
        })
        .catch(err => {
          console.log(err)
          this.exShow = false
          this.queryShow = false
        })
    },
    // 点击查询
    t_button() {
      day.s_e(this.s_time, this.e_time, this.t_value)
        .then(() => {
          this.export_s_time = this.s_time
          this.export_e_time = this.e_time
          this.export_t_value = this.t_value
          this.export_workshop_value = this.export_workshop_value === '' ? '01' : this.workshop_value
          this.export_value2 = this.value2
          console.log("可以调方法了")
          this.table_loading = true
          this.tableData = []
          this.getDataList()
        })
        .catch(() => { })
    },
    // 切换年月日
    t_change(n) {
      if (n === 1) {
        this.content = '查询时间跨度最大为24小时'
      }
      if (n === 2) {
        this.content = '查询时间跨度最大为31天'
      }
      this.v_type = day.change_type(n).v
      this.d_type = day.change_type(n).d
      this.s_e = day.init_value(this.d_type)
      this.s_time = ''
      this.e_time = ''
      this.getCustData(2)
      if (n === 1) {
        this.value2 = ''
      } else {
        this.value2 = '07:00'
      }
    }
  }
}
</script>
 <style scoped lang='scss'>
</style>

